<template>
  <div class="mine">
    <MyHead title="个人中心" :noBack="true"></MyHead>
    <div class="mine-top">
      <div class="user-info" v-if="userInfo">
        <img
          class="avatar"
          :src="userInfo.avatar.replace(/public/, baseURL)"
          v-if="userInfo.avatar"
          alt=""
        />
        <img class="avatar" :src="pic" v-else alt="" />
        <h2 class="name mt10">{{ userInfo.username }}</h2>
        <h3 class="phone mt10">{{ userInfo.phone }}</h3>
      </div>
      <div class="nologin" v-else>
        <van-button
          @click="gotopage('/login')"
          round
          block
          type="primary"
          class="tada1"
          >去登录</van-button
        >
      </div>
    </div>
    <div class="cell">
      <van-cell-group>
        <div v-if="userInfo">
          <van-cell
            title="个人信息"
            icon="manager-o"
            is-link
            @click="gotopage('/myinfo')"
            :value="userInfo.nickname"
          />
          <van-cell
            title="面试题"
            icon="label-o"
            :value="myms.length"
            is-link
            to="/myms"
          />
          <van-cell
            title="Offer"
            icon="award-o"
            value="2"
            is-link
            to="/myoffers"
          />
          <van-cell
            title="点赞"
            icon="like-o"
            :value="obj.likes"
            is-link
            :to="'/myactions/1?value=' + obj.likes"
          />
          <van-cell
            title="收藏"
            icon="star-o"
            :value="obj.collects"
            is-link
            :to="'/myaction/2?value=' + obj.collects"
          />
          <van-cell
            title="评论"
            icon="comment-o"
            :value="obj.pings"
            is-link
            :to="'/myaction/3?value=' + obj.pings"
          />
          <van-cell title="我的好友" icon="friends-o" value="2" is-link />
          <van-cell title="我的地址" icon="location-o" is-link to="/address" />
          <van-cell title="修改密码" icon="eye-o" is-link to="/resetpass" />
        </div>
        <van-cell title="历史记录" icon="records-o" value="88" is-link />
        <van-cell title="通知" icon="volume-o" value="3" is-link />
        <van-cell title="公告" icon="cluster-o" value="2" is-link />
        <van-cell
          title="清除缓存"
          icon="share-o"
          @click="clearCache"
          :value="cache + 'M'"
          is-link
        />
        <van-cell title="设置" icon="setting-o" is-link />
      </van-cell-group>
      <div class="quit" v-if="userInfo">
        <van-button type="default" block @click="todoLogout"
          >退出登录</van-button
        >
      </div>
    </div>
    <van-overlay :show="show">
      <div class="mask" v-if="show">
        <Dao
          :time="Math.ceil(cache / 100)"
          :onFinish="onFinish"
          :mstyle="{ top: 0, left: 0, position: 'relative' }"
          :swidth="60"
          size="160px"
        ></Dao>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { todogetmslikes, todogetcollectlist, todogetpinglist } from "@/api/api";
export default {
  data() {
    return {
      cache: 0,
      show: false,
      obj: {},
    };
  },
  mounted() {
    this.getUserInfoAsync();
    this.cache =
      (localStorage.getItem("cache") ? localStorage.getItem("cache") * 1 : 0) +
      Math.round(Math.random() * 100);

    localStorage.setItem("cache", this.cache);

    this.$nextTick(() => {
      if (sessionStorage.getItem("token")) {
        this.getMyMsListAsync();
      }
      if (this.userInfo) {
        this.getMyDates();
      }
    });
  },
  methods: {
    async getMyDates() {
      let likes = await todogetmslikes({
        phone: this.userInfo.phone,
      });
      let collects = await todogetcollectlist({
        phone: this.userInfo.phone,
      });
      let pings = await todogetpinglist({
        phone: this.userInfo.phone,
      });
      this.$set(this.obj, "likes", likes.result.length);
      this.$set(this.obj, "collects", collects.result.length);
      this.$set(this.obj, "pings", pings.result.length);
    },
    onFinish() {
      this.cache = 0;
      localStorage.setItem("cache", 0);
      this.show = false;
      this.ShowToast("缓存清除成功了");
    },
    clearCache() {
      if (this.cache != 0) {
        this.show = true;
      } else {
        this.ShowToast("没有任何缓存数据");
      }
    },
    todoLogout() {
      this.$dialog
        .confirm({
          title: "友情提示",
          message: "你真的要注销登录吗?",
        })
        .then(() => {
          sessionStorage.removeItem("token");
          this.getUesrInfoData(null);
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mine {
  width: 100%;
  min-height: calc(100vh - 50px);
  background: #f4f4f4;
  .quit {
    padding: 16px;
  }
  &-top {
    width: 100%;
    height: 240px;
    padding: 15px;
    background: url(../../assets/images/mine.gif) 0 0 no-repeat;
    background-size: 100% 100%;
    .user-info {
      text-align: center;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #fff;
      font-size: 24px;
      .avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
      .phone {
        font-size: 20px;
      }
    }
    .nologin {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 80px;
    }
  }
}
</style>
